<template>
  <CommonPage>
    <template #custom>
      <AppCard class="rounded-8 p-24" line="#4D73F0">
        <n-flex justify="space-between">
          <div class="text-20 color-#030912 font-bold">{{ data.detail.name }}</div>
          <n-flex>
            <n-button v-permission="`niche_update`" @click="$nicheForm?.handleEdit(data.detail)">
              修改
            </n-button>
            <n-button
              v-permission="`niche_change_project`"
              color="#0A56D8FF"
              :disabled="data.detail.phase === 2"
              @click="$projectForm.handleAdd(() => $projectForm.setState('title', '转项目'))"
            >
              转项目
            </n-button>
          </n-flex>
        </n-flex>
        <n-grid :cols="3" y-gap="20" class="mt-20 w-1000">
          <n-gi>
            <MyLabel
              icon="01"
              label="客户名称"
              :value="
                (data?.detail?.customerManagementDtoList || []).map((item) => item.name).join('；')
              "
            />
          </n-gi>
          <n-gi>
            <MyLabel
              icon="01"
              label="对接人"
              :value="
                (data?.detail?.customerManagementDtoList || [])
                  .map((item) => item.contactorDtoList || [])
                  .flat()
                  .map((item) => item.contactorName)
                  .join('；')
              "
            />
          </n-gi>
          <n-gi>
            <MyLabel icon="02" label="创建人">
              <MyInfo :src="data.detail.createUserAvatar" :text="data.detail.createUserName" />
            </MyLabel>
          </n-gi>
          <n-gi>
            <MyLabel icon="03" label="接入时间" :value="$format(data.detail.abutmentTime)" />
          </n-gi>
          <n-gi>
            <MyLabel icon="04" label="阶段" :value="data.detail.phaseName" />
          </n-gi>
          <n-gi>
            <MyLabel icon="03" label="创建时间" :value="$format(data.detail.createTime)" />
          </n-gi>
          <n-gi span="1 3">
            <MyLabel icon="05" label="商机简述" :value="data.detail.resume" />
          </n-gi>
          <n-gi span="1 3">
            <MyLabel icon="06" label="附件">
              <FileList :model-value="data.detail.refFileDtoList" :show-remove="false" />
            </MyLabel>
          </n-gi>
        </n-grid>
      </AppCard>
      <AppCard class="mt-16 rounded-8 p-24">
        <MyTabs v-model="active" :options="tabs" />
        <Record
          v-if="active === 'business'"
          :id="id"
          key="business"
          :apis="businessApis"
          :permission-keys="{
            list: 'business_records_list',
            add: 'business_records_add',
            edit: 'business_records_update',
            del: 'business_records_delete',
          }"
        />
        <Record
          v-if="active === 'duration'"
          :id="id"
          key="duration"
          :apis="durationApis"
          :permission-keys="{
            list: 'working_hours_records_list',
            add: 'working_hours_records_add',
            edit: 'working_hours_records_update',
            del: 'working_hours_records_delete',
          }"
        />
        <Record
          v-if="active === 'demand'"
          :id="id"
          key="demand"
          :apis="demandApis"
          :permission-keys="{
            list: 'requirement_records_list',
            add: 'requirement_records_add',
            edit: 'requirement_records_update',
            del: 'requirement_records_delete',
          }"
        />
      </AppCard>
      <ProjectForm
        ref="$projectForm"
        :opportunity-id="id"
        :default-name="data.detail.name"
        @result="methods.onChangeProject"
      />
      <NicheForm ref="$nicheForm" mode="drawer" @result="methods.onResult" />
    </template>
  </CommonPage>
</template>
<script setup lang="jsx">
import { useAuthTabs } from '@/hooks/useAuthTabs'
import NicheForm from './modules/NicheForm.vue'
import * as nicheApi from '@/api/niche'
defineOptions({ name: 'NicheDetail' })
const route = useRoute()
const id = ref(route.query.id)
const $nicheForm = ref(null)
const { tabs, active } = useAuthTabs([
  { label: '商务记录', value: 'business', key: 'business_records' },
  { label: '工期记录', value: 'duration', key: 'working_hours_records' },
  { label: '需求管理', value: 'demand', key: 'requirement_records' },
])
const data = reactive({
  detail: {},
})
const methods = reactive({
  async getDetail() {
    data.detail = (await nicheApi.info({ id: id.value })).data
  },
  onChangeProject() {
    $message.success('转项目成功!')
    methods.getDetail()
  },
  onResult() {
    $message.success(`商机修改成功!`)
    methods.getDetail()
  },
})
const businessApis = {
  add: nicheApi.businessAdd,
  list: nicheApi.businessList,
}
const durationApis = {
  add: nicheApi.durationAdd,
  list: nicheApi.durationList,
}
const demandApis = {
  add: nicheApi.demandAdd,
  list: nicheApi.demandList,
}
const $projectForm = ref(null)
onBeforeMount(() => {
  methods.getDetail()
})
</script>
<style lang="scss" scoped></style>
